<template>
	<view>
		<uni-grid :column="3" :highlight="true" borderColor="#ffdc14" :square="false">
			<uni-grid-item>
				<view class="grid-item-box" style="background-color: #fff;" @click="flushQuestion">
					<text class="text">获取一个：{{remainingQuantity}}</text>
				</view>
			</uni-grid-item>
			<uni-grid-item>
				<view class="grid-item-box" style="background-color: #fff;" @click="showAnswer">
					<text class="text">查看回答</text>
				</view>
			</uni-grid-item>
			<uni-grid-item>
				<view class="grid-item-box" style="background-color: #fff;" @click="refreshQuantity">
					<text class="text">重新生成</text>
				</view>
			</uni-grid-item>
		</uni-grid>
		<uni-section :title="randomQuestion.title" type="line"></uni-section>
		<view style="margin: 10px;" v-if="isShowAnswer">
			<u-parse className="else-parse" :content="randomQuestion.content" :autosetTitle="false"
				:show-with-animation="true" :selectable="true"></u-parse>
		</view>
	</view>

</template>

<script>
	import {
		Base64
	} from 'js-base64';
	export default {
		mixins: [],
		data() {
			return {
				dynamicList: [],
				list: [],
				// 剩余数量
				remainingQuantity: 0,
				//合集ID
				compilationId: null,
				randomQuestion: {},
				isShowAnswer: false,
			}
		},
		components: {

		},
		//页面加载
		onShow: function() {

		},
		created() {
			this.flushQuestion()
		},
		computed: {

		},
		methods: {
			//查看回答
			showAnswer() {
				this.isShowAnswer = !this.isShowAnswer
			},
			//重新生成
			refreshQuantity() {
				this.$api.refreshQuantity("").then(() => {
					this.flushQuestion()
				})
			},
			change(e) {
				this.flushQuestion()
			},
			async flushQuestion() {

				let resData = (await this.$api.randomOne("")).data
				// console.info(resData)
				if (resData.content) {
					resData.content = this.$common.dealRichTextImg(Base64.decode(resData.content))
					resData.content = this.$common.dealRichTextTagP(resData.content)
				}
				this.randomQuestion = resData
				this.isShowAnswer = false
				this.answers = ''
				this.$api.getRemainingQuantity("").then((e) => {

					this.remainingQuantity = e.data
				})
			},


		}
	}
</script>
<style lang="scss">
	.image {
		width: 25px;
		height: 25px;
	}

	.text {
		font-size: 14px;
		margin-top: 5px;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		// display: block;
		/* #endif */
	}

	.grid-dynamic-box {
		margin-bottom: 15px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}

	.swiper {
		height: 420px;
	}

	/* #ifdef H5 */
	@media screen and (min-width: 768px) and (max-width: 1425px) {
		.swiper {
			height: 630px;
		}
	}

	@media screen and (min-width: 1425px) {
		.swiper {
			height: 830px;
		}
	}

	/* #endif */
	/* 富文本的样式 */
	/deep/.wxParse .p {
		padding-bottom: 0em;
		text-indent: 2em;
	}
</style>